<template>
  <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
  <view :class="classArr" v-html="htmlCode"></view>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { IPanelContainer } from "@ibiz/model-core";
import { computed, PropType } from "vue";
import { useNamespace } from "@/use";
import { PanelItemRenderController } from "./i-biz-panel-item-render.controller";

// 定义组件接收的属性
const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelContainer>,
    required: true,
  },
  controller: {
    type: PanelItemRenderController,
    required: true,
  },
});

// 获取命名空间和相关数据
const ns = useNamespace("panel-item-render");
const nsType = useNamespace(`panel-${props.modelData.itemType?.toLowerCase()}`);
const { id } = props.modelData;

// 计算类名数组
const classArr = computed(() => {
  const result: Array<string | false> = [
    ns.b(),
    ns.m(id),
    nsType.b(),
    ns.is("hidden", !props.controller.state.visible),
  ];
  return result;
});

// 计算自定义HTML代码
const htmlCode = computed(() => {
  return props.controller.getPanelItemCustomHtml(
    props.modelData.controlRenders!,
    props.controller.data
  );
});
</script>
